<template>
  <div>
        <h1>我今年的计划</h1>
        <h2 v-myif="true">希望今年的计划全部完成</h2>
        <hr>
        <todo-search @sendText="addData"></todo-search>
        <div class="con_wrap">
          <todo-list @selid="toChangeSel" @sendid="todel" :todolist="filterList"></todo-list>
          <btn-list @sendstatus="getStatus" myname="周星驰" myhobby="泡妞" myshengao="180">
              <template #footer>
                  <h1>我是脚步插槽内容</h1>
              </template>
                <template #bottom>
                  <h1>我是最底部的插槽内容</h1>
              </template>
          </btn-list>
        </div>
  </div>
</template>

<script setup>
// vue3的setup语法糖引入子组件  直接使用
    import todoSearch from './todo_search.vue'
    import todoList from './todolist.vue'
    import btnList from './btn_list.vue'
  import {ref,reactive,toRefs,provide} from 'vue'
  import * as XLSX from 'xlsx' // excel导入 导出
import fileSaver from 'file-saver' //下载文件的插件
    // 准备todolist需要的数据
    let state=reactive({
        list:[],
        filterList:[] //根据条件过滤后的数组
    })

    // 字传父 的自定义事件调用的函数
    // 的形参 就是子传父的值
    let addData=(searchText)=>{
        // searchText 子传父的值

        // 将传来的数据添加到list数据
        state.list.push({
          id:new Date().getTime(),
          isCheck:false,
          text:searchText
        })
     state.filterList=state.list;
    }
    // 删除方法 接受子组件传来的id
    let todel=(id)=>{
        state.list.forEach((item,index)=>{
          if(item.id===id){
              state.list.splice(index,1)
          }
        })
         state.filterList=state.list;
    }
    //通过子组件传来的id 改变数据中isCheck变为完成\
  let toChangeSel=(id)=>{
      console.log(id,'%%%%%%%%%%%%%%')
      state.list.forEach(item=>{
            if(id==item.id){
              item.isCheck=!item.isCheck;
            }
      } )
      state.filterList=state.list;
  }

  // 获取子组件按钮组传来的状态 过滤数据

  let getStatus=(sta)=>{
     
      if(sta=='all'){ //所有数据
          state.filterList=state.list;
      }
       if(sta=="done"){ //已完成的数据
         state.filterList=state.list.filter(item=>item.isCheck==true)
      }
      if(sta=="no"){ // 未完成的数据
         state.filterList=state.list.filter(item=>item.isCheck==false)
      }
      // 
      if(sta=="todone"){ //所有标记已完成
        state.list.forEach(item=>{
          item.isCheck=true;
        })
        state.filterList=state.list;
      }
      if(sta=="clear"){ //全部清除
         state.filterList=[];
      }
      if(sta=="toexcel"){
           const worksheet = XLSX.utils.json_to_sheet(state.list) // 将列表数据转为excel的内容
          const workbook = XLSX.utils.book_new()// 创建一个新的工作簿
          XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
          XLSX.writeFile(workbook, '今年计划表.xlsx') // 导出文件
      }
      console.log(state.list,"66666666666")
  }
    let {list,filterList}=toRefs(state)

    // 给孙子辈组件传值
    let btnText=ref('事与愿违')
    provide('btext',btnText.value)
    



</script>
<style  scoped>
  .con_wrap{
    display: flex;
  }
</style>